<script setup>
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Message } from '@arco-design/web-vue'
import api from '@/api'

const switchValue = ref('')
const $route = useRoute()
const $router = useRouter()

const keyword = ref('')
const pageVal = ref(1)
const pageSize = ref(10)
const listTotal = ref(0)
const listData = ref([])
const getListData = async (page) => {
  try {
    const res = await api.get('/template/systemTemplateList', {
      params: {
        keyword: keyword.value,
        page,
        pageSize: pageSize.value,
      },
    })
    console.log('res', res)
    listData.value = res.data.items
    listTotal.value = res.data.pageInfo.total
    pageVal.value = page
  } catch (error) {
    console.error(error)
  }
}
getListData(1)

const deleteData = (record) => {
  // Message.error({
  //   content: record.id,
  // })
  api
    .get(`/template/systemDeleteTemplate?template_id=${record.id}`)
    .then((res) => {
      if (res.code == 200) {
        Message.success({
          content: '删除成功',
        })
        getListData(1)
      } else {
        Message.error({
          content: res.message,
        })
      }
    })
}

const updateStatus = (record, status) => {
  api
    .get(
      `/template/updateTemplateStatus?template_id=${record.id}&status=${status}`
    )
    .then((res) => {
      if (res.code == 200) {
        Message.success({
          content: '操作成功',
        })
        getListData(1)
      } else {
        Message.error({
          content: res.message,
        })
      }
    })
}

const toJump = (url) => {
  console.log('router', $router.push(url))
  $router.push(url)
}
</script>

<template>
  <div class="page">
    <div class="header">
      <div>
        <a-input-search :style="{ width: '320px' }"
                        v-model="keyword"
                        placeholder="模版名称模糊查询"
                        button-text="查询"
                        @search="getListData"
                        search-button />
      </div>
      <a-button @click="toJump('/recruit/formwork/form?type=1')"
                type="primary">新建招聘模板</a-button>
    </div>

    <a-table :data="listData"
             @page-change="getListData"
             :pagination="{
              showTotal: true,
              size: 'small',
              total: listTotal,
              pageSize: pageSize,
              current: pageVal,
            }">
      <template #columns>
        <a-table-column title="序号"
                        :width="60">
          <template #cell="{ rowIndex }"> {{ rowIndex + 1 }} </template>
        </a-table-column>
        <a-table-column title="招聘模版名称"
                        data-index="template_name"></a-table-column>

        <a-table-column title="启用状态">
          <template #cell="{ record }">
            <a-switch v-model="switchValue"
                      :model-value="record.status == 1 ? true : false"
                      @change="updateStatus(record, record.status == 1 ? 0 : 1)"></a-switch>
          </template>
        </a-table-column>

        <a-table-column title="操作"
                        align="center"
                        :width="300">
          <template #cell="{ record }">
            <a-space>
              <a-button type="primary"
                        size="mini"
                        @click="toJump('/recruit/formwork/form?type=2&id=' + record.id)">查看</a-button>
              <a-button type="primary"
                        size="mini"
                        @click="toJump('/recruit/formwork/form?type=3&id=' + record.id)">编辑</a-button>

              <a-popconfirm @ok="deleteData(record)"
                            content="确认删除该数据吗?"
                            type="warning">
                <a-button type="primary"
                          status="danger"
                          size="mini">删除</a-button>
              </a-popconfirm>
            </a-space>
          </template>
        </a-table-column>
      </template>
    </a-table>
  </div>
</template>

<style scoped>
.page {
  height: 100%;
}

.header {
  height: 52px;
  display: flex;
  justify-content: space-between;
}
</style>
